
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>添加商品</title>
    <link rel="stylesheet" href="./static/common/layui/css/layui.css">
    <link rel="stylesheet" href="./static/admin/css/style.css">
    <script src="./static/common/layui/layui.js"></script>
    <script src="./static/common/jquery-3.3.1.min.js"></script>
    <script src="./static/common/vue.min.js"></script>
</head>
<body>
<div id="app">
    <!--顶栏-->
    <header>
        <h1 v-text="webname"></h1>
        <div class="breadcrumb">
            <i class="layui-icon">&#xe715;</i>
            <ul>
                <li v-for="vo in address">
                    <a  v-text="vo.name" :href="vo.url" ></a> <span>/</span>
                </li>
            </ul>
        </div>
    </header>

    <div class="main" id="app">
        <!--左栏-->
        <div class="left">
            <ul class="cl" >
                <!--顶级分类-->
                <li v-for="vo,index in menu" :class="{hidden:vo.hidden}">
                    <a href="javascript:;"  :class="{active:vo.active}"  @click="onActive(index)">
                        <i class="layui-icon" v-html="vo.icon"></i>
                        <span v-text="vo.name"></span>
                        <i class="layui-icon arrow" v-show="vo.url.length==0">&#xe61a;</i> <i v-show="vo.active" class="layui-icon active">&#xe623;</i>
                    </a>
                    <!--子级分类-->
                    <div v-for="vo2,index2 in vo.list">
                        <a href="javascript:;" :class="{active:vo2.active}" @click="onActive(index,index2)" v-text="vo2.name"></a>
                        <i v-show="vo2.active" class="layui-icon active">&#xe623;</i>
                    </div>
                </li>
            </ul>
        </div>
        <!--右侧-->
        <div class="right">
            <fieldset class="layui-elem-field layui-field-title">
                <legend>添加商品</legend>
            </fieldset>


            <form id="form" class="layui-form " action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">产品名称</label>
                    <div class="layui-input-block">
                        <input name="proName" v-model="product.pro_name" type="text" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">产品图片</label>
                    <div class="layui-input-block">
                        <div class="layui-upload">
                            <button type="button" class="layui-btn" id="test1">上传图片</button>
                            <div class="layui-upload-list">
                                <img  name="proImg" v-model="product.pro_img" style="width:300px;height: 300px" class="layui-upload-img" id="demo1">
                                <p id="demoText"></p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">编号</label>
                    <div class="layui-input-block">
                        <input name="proNumber" v-model="product.pro_number" type="text" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">原价</label>
                    <div class="layui-input-block">
                        <input name="proCostPrice" v-model="product.pro_cost_price" type="text"  required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">现价</label>
                    <div class="layui-input-block">
                        <input name="proPrice" v-model="product.pro_price" type="text" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">销量</label>
                    <div class="layui-input-block">
                        <input name="proSalesNum" v-model="product.pro_sales_num" type="text"  required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">剩余件数</label>
                    <div class="layui-input-block">
                        <input name="proStock" v-model="product.pro_stock" type="text" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">内容</label>
                    <textarea name="proContext" id="context"  v-model="product.pro_context" style="display: none;"></textarea>

                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">描述</label>
                    <textarea name="proDescribe" id="description" v-model="product.pro_describe" style="display: none;"></textarea>

                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">说明</label>
                    <textarea name="proIntroduce" id="proIntroduce" v-model="product.pro_introduce"  style="display: none;"></textarea>

                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="addProduct">立即提交</button>
                    </div>
                </div>
            </form>

        </div>
    </div>
</div>

<script src="./static/admin/js/config.js"></script>
<script src="./static/admin/js/script.js"></script>
<script>
    layui.use(['upload','layedit','form'], function() {


        var layedit = layui.layedit;
        $ = layui.jquery
        layedit.set({
            uploadImage: {
                url: '/watchsystem/file/upload' //接口url
                ,type: 'post' //默认post
            }
        });

        var context = layedit.build("context"); //建立编辑器
        var description = layedit.build('description'); //建立编辑器
        var proIntroduce = layedit.build('proIntroduce'); //建立编辑器

        var id = GetQueryString("id")


        var $ = layui.jquery
            , upload = layui.upload;
        var form = layui.form;
        //监听提交
        form.on('submit(addProduct)', function(data){
            // layer.msg(JSON.stringify(data.field));
            var field = data.field
            console.log(field)
            console.log(layedit.getContent(context))
            $.ajax({
                url:"/watchsystem/product/edit",
                data:{
                    id:id,
                    proNumber:field.proNumber,
                    proName:field.proName,
                    proCostPrice:field.proCostPrice,
                    proImg:$('#demo1').attr('src'),
                    proPrice:field.proPrice,
                    proSalesNum:field.proSalesNum,
                    proStock:field.proStock,
                    proContext:layedit.getContent(context),
                    proIntroduce:layedit.getContent(proIntroduce),
                    proDescribe:layedit.getContent(description)
                },
                method:'post',
                success:function (data) {
                    console.log(data)
                    layer.msg(data.msg)
                }
            })
            return false;
        });
        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            , url: '/watchsystem/file/upload' //改成您自己的上传接口
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            , done: function (res) {
                console.log("图片上传")
                console.log(res)
                //如果上传失败
                if (res.code == 0) {
                    vue.product.pro_img = res.data.src
                    console.log(vue.product)
                    $('#demo1').attr('src', res.data.src)
                    return layer.msg('上传成功');
                }else{
                    return layer.error("上传失败");
                }
                //上传成功
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });


        //查询产品信息



        $.ajax({
            url:"/watchsystem/product/select",
            data:{
                "id":id
            },
            method: 'post',
            success:function (data) {
                console.log(data)
                vue.product.pro_cost_price = data.data.proCostPrice;
                vue.product.pro_name = data.data.proName;
                vue.product.pro_number = data.data.proNumber;
                vue.product.pro_price = data.data.proPrice;
                vue.product.pro_sales_num = data.data.proSalesNum;
                vue.product.pro_stock = data.data.proStock;

                $('#demo1').attr('src', data.data.proImg)
                layedit.setContent(description,data.data.proDescribe)
                layedit.setContent(proIntroduce,data.data.proIntroduce)
                layedit.setContent(context,data.data.proContext)

            }
        })




    })

    /**
     * 获取请求参数
     * @param name
     * @returns {string|null}
     * @constructor
     */
    function GetQueryString(name)
    {
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if(r!=null)return  unescape(r[2]); return null;
    }
</script>
</body>
</html>
